<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0px;
        padding: 0px;
    }
    .box{
        
        width: 150px;
        height: 400px;
    margin: 40px  auto;
    }
    .box ul{
        background-color: red;
        width: 150px;
       
    }
    .box   ul ul{
        background-color: aqua;
    }
    .box ul  li{
        height: 30px;
        line-height: 30px;
        text-align: center;
        color: white;
        list-style: none;
    }
#d2{
    display: none;
}
ul  ul li:hover{
    background-color: blue;
}
#u1  li:hover{
    color: chocolate;
    background-color: cornsilk;
}


</style>
<body>
    <div  class="box">
    <ul   id="u1">
        <li>我的淘宝</li>
        <ul  id="d2">
            <li>以买到的宝贝</li>
            <li>我的足迹</li>
  </ul>

  </ul>

</div>
<script>
    
    
    u1.onmouseover=function(){
      
        d2.style.display="block";
       
    }
    u1.onmouseout=function(){
        d2.style.display="none";
    }
    







</script>
    
</body>
</html>